<template>
  <div class="flex flex-column height">
    <header-top
      ref="header"
      :TxtHeader="TxtHeader"
      @leftClick="back"
      style="border-bottom:1px solid #f1f1f1"
    ></header-top>
    <div class="content">
      <div class="content_bottom">
        <van-tree-select
          :items="departmentList"
          :height="height"
          :active-id.sync="activeId"
          :main-active-index.sync="activeIndex"
          @click-nav="clickNavFn"
          @click-item="itemFn"
        />
      </div>
    </div>
    <van-loading
      type="spinner"
      v-if="loading1"
      class="spinner"
      color="#1989fa"
    />
  </div>
</template>
<script>
import HeaderTop from "@/components/header-top";
import { GetLevel } from "@/api/index";
import { Dialog } from "vant";
export default {
  name: "departments",
  components: {
    HeaderTop,
    [Dialog.Component.name]: Dialog.Component
  },
  data() {
    return {
      loading1: false,
      height: 0,
      TxtHeader: {
        //头部设置
        background: "#fff", //头部背景颜色
        color: "#0a0a0a", //头部中间文字颜色
        title: "选科室",
        leftOpt: {
          //左边按钮设置
          icon: "",
          text: "",
          color: "#000"
        }
      },
      departmentList: [],
      activeId: 0,
      activeIndex: -1
    };
  },
  created() {
    this.GetLevelFn();
  },
  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - this.$refs.header.$el.clientHeight - 1;
    });
  },
  methods: {
    itemFn(val) {
      this.department = val.text;
      this.$router.push({
        path: "/doctorlist",
        query: {
          code: val.valueCode,
          name: val.valueName
        }
      });
    },
    clickNavFn(item) {
      this.GetLevelFn(item);
    },
    GetLevelFn(item) {
      const data = {
        parentDeparmentCode:
          item != undefined ? this.departmentList[item].valueCode : ""
      };
      this.loading1 = true;
      GetLevel(data).then(res => {
        this.loading1 = false;
        if (res.body) {
          if (item != undefined) {
            res.body.departMentList.map(key => {
              key.id = key.valueCode;
              key.text = key.valueName;
            });
            if (!res.body.departMentList.length) {
              this.$router.push({
                path: "",
                query: {
                  key: this.departmentList[item].valueCode
                }
              });
            }
            this.departmentList[item].children = res.body.departMentList;
          } else {
            res.body.departMentList.map(key => {
              key.id = key.valueCode;
              key.text = key.valueName;
            });
            this.departmentList = res.body.departMentList;
          }
        } else {
          Dialog.alert({
            message: "数据异常",
            confirmButtonText: "我知道了"
          });
        }
      });
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
.content_bottom >>> .van-tree-select__nav {
  width: 1.36rem;
  flex: none;
}
.content_bottom >>> .van-tree-select__nav-item {
  padding: 0;
  text-align: center;
  font-size: 0.12rem;
  height: 0.37rem;
  width: 1.36rem;
  line-height: 0.37rem;
}
.content_bottom >>> .van-tree-select__item--active {
  color: #02c0cb;
}
.content_bottom >>> .van-sidebar-item--select::before {
  position: absolute;
  top: 50%;
  left: 0.2rem;
  margin-top: -5px;
  border: 3px solid;
  width: 0;
  height: 0;
  background: none;
  border-color: transparent transparent #02c0cb #02c0cb;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0.8;
  content: "";
}
</style>
<style lang="less" scoped>
.content {
  height: calc(100% - 0.5rem);
  overflow-y: auto;
  .content_top {
    padding: 0.1rem 0.24rem;
    background: #fff;
    margin-bottom: 0.08rem;
    .left {
      h3 {
        height: 0.22rem;
        line-height: 0.22rem;
        font-size: 0.16rem;
        color: #2b2b2b;
        margin-bottom: 0.04rem;
      }
      div {
        height: 0.14rem;
        margin-bottom: 0.05rem;
        span {
          display: block;
          width: 0.22rem;
          height: 0.12rem;
          line-height: 0.12rem;
          text-align: center;
          background: #f1ae22;
          color: #fff;
          font-size: 0.08rem;
          border-radius: 0.02rem;
          margin-right: 0.04rem;
        }
        i {
          font-size: 0.01rem;
          color: #666;
        }
      }
      p {
        font-size: 0.01rem;
        color: #999;
        line-height: 0.14rem;
        height: 0.14rem;
      }
    }
    .right {
      font-size: 0.14rem;
      color: #999;
      img {
        width: 0.12rem;
        vertical-align: middle;
      }
    }
  }
}
</style>
